<template>
  <div>
    <sec-form
      :searchBox="{ span: 6 }"
      :span="8"
      :optionData="optionData"
      :ruleForm="ruleForm"
      :formData="formData"
      @reset="searchHandle"
      @submitForm="searchHandle"
    >
    </sec-form>
    <el-button style="margin-bottom: 10px" @click="addSenUrl" type="primary" icon="el-icon-plus">新增敏感URL</el-button>
    <sec-table :loading="searchTable.loading" :tableData="searchTable.rows" :tableCol="searchTable.cols" ref="secTabel">
      <template v-slot:whiteItems="{ data }">
        <el-popover
          class="popover-box"
          placement="top"
          trigger="hover"
          width="300"
          v-for="(item, index) in data.row.whiteItems"
          :key="index"
        >
          <p>加白原因：{{ item.remark }}</p>
          <div style="text-align: left; margin: 0">
            <el-button size="mini" type="text" @click="cancelWhilteById(item.id)">取消加白</el-button>
          </div>
          <el-button slot="reference" type="primary" plain>{{ item.itemName }}</el-button>
        </el-popover>
      </template>
    </sec-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      background
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :layout="layout"
      :total="totalSize"
    >
    </el-pagination>
    <el-dialog :title="title" :visible.sync="diaShow" width="50%">
      <sec-form
        :optionData="optionData"
        ref="editFormRef"
        :formData="editFormData"
        :ruleForm="editRuleForm"
        :rules="rules"
      ></sec-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="diaShow = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import secTable from "components/table/comTable";
import { paginationMixin, addWhiteMixin } from "common/js/mixin";
import { urlSensitivelist, saveUrlApi, deleteUrlApi } from "api/propertyManage";
import { urlConfigApi } from "api/api";
//风险列表table
export default {
  mixins: [paginationMixin, addWhiteMixin],
  components: {
    secTable,
  },
  data() {
    return {
      title: "",
      optionData: {
        interfaceType: [],
        interfaceSubType: [],
      },
      editFormData: [
        { type: "text", label: "URL", prop: "url" },
        { type: "select", label: "接口类型", prop: "interfaceType", filterable: true },
        { type: "select", label: "敏感性", prop: "interfaceSubType", filterable: true },
      ],
      editRuleForm: { url: "", interfaceType: "", interfaceSubType: "" },
      rules: {
        url: this.config.inputRule,
        // interfaceType: this.config.selectRule,
        // interfaceSubType: this.config.selectRule,
      },
      diaShow: false,
      ruleForm: { url: "" },
      formData: [{ type: "text", label: "URL", prop: "url" }],
      /***
       * 列表区域
       */
      searchTable: {
        //加载中
        loading: false,
        /***
         * 表格列
         */
        cols: [
          // { type: "selection", width: 60, align: "center" },
          { label: "ID", prop: "id", align: "center", width: 70 },
          { label: "URL", prop: "url", align: "center", width: 200 },
          { label: "接口类型", prop: "interfaceType", align: "center", width: 120 },
          { label: "敏感性", prop: "interfaceSubType", align: "center" },
          { label: "访问次数", prop: "accessTimes", align: "center" },
          { label: "加白指标", prop: "whiteItems", type: "slot", align: "left", width: 200 },
          {
            label: "url来源",
            prop: "source",
            align: "left",
            formatter: (row, column, cellValue, index) => {
              return this.utils.getDicLabel("urlSource", cellValue);
            },
          },
          { label: "hitsTimes", prop: "hitsTimes", align: "center", width: 100 },
          { label: "maxHitTimes", prop: "maxHitTimes", align: "center", width: 120 },
          { label: "lastesHitTimes", prop: "lastestHitTimes", align: "center", width: 120 },
          { label: "发现时间", prop: "firstTime", align: "center", width: 150 },
          { label: "最近时间", prop: "lastestTime", align: "center", width: 150 },
          { label: "PATTERN", prop: "urlPattern", align: "center" },
          {
            type: "operation",
            label: "操作",
            width: 100,
            children: [
              {
                label: "编辑",
                hide: ({ row }) => {
                  //0 自动识别  1是手动添加
                  return row.source === "1" ? false : true;
                },
                click: ({ row }) => {
                  this.editSenUrl(row);
                },
              },
              {
                label: "删除",
                hide: ({ row }) => {
                  //0 自动识别  1是手动添加
                  return row.source === "1" ? false : true;
                },
                click: ({ row }) => {
                  this.delSenUrl(row);
                },
              },
            ],
          },
        ],
        /**
         * 表格数据
         */
        rows: [
          // {
          //   whiteItems: [
          //     { id: 1, itemName: "敏感url", remark: "取消加白原因" },
          //     { id: 1, itemName: "敏感url11", remark: "1111取消加白原因" },
          //   ],
          // },
        ],
      },
    };
  },
  mounted() {
    urlConfigApi().then((res) => {
      console.log("[ res ] >", res);
      let data = res.data;
      let { interfaceSubType, interfaceType } = data[0].params;
      this.optionData.interfaceSubType = [];
      this.optionData.interfaceType = [];
      for (let key in interfaceType) {
        let obj = { label: interfaceType[key], value: key };
        this.optionData.interfaceType.push(obj);
      }
      interfaceSubType.forEach((item) => {
        let obj = { label: item, value: item };
        this.optionData.interfaceSubType.push(obj);
      });
    });
    this.initTableData();
  },
  methods: {
    confirm() {
      if (this.$refs.editFormRef.submitForm()) {
        saveUrlApi({ id: this.selRow.id || "", ...this.editRuleForm }).then((res) => {
          let state = this.message.state(res);
          if (!state) return;
          this.diaShow = false;
          this.initTableData();
        });
      }
    },
    searchHandle() {
      this.page = 1;
      this.initTableData();
    },
    delSenUrl(row) {
      this.utils.$confirm({ content: `确定要删除『${row.url}』?` }, () => {
        deleteUrlApi({ id: row.id }).then((res) => {
          let state = this.message.state(res);
          if (!state) return;
          this.initTableData();
        });
      });
    },
    addSenUrl() {
      this.diaShow = true;
      this.selRow = {};
      this.editRuleForm = {};
      this.$nextTick(() => {
        this.$refs.editFormRef.clearForm();
      });
    },
    editSenUrl(row) {
      this.selRow = row;
      this.diaShow = true;
      this.editRuleForm = JSON.parse(JSON.stringify(row));
      this.$nextTick(() => {
        this.$refs.editFormRef.clearForm();
      });
    },
    //获取敏感url表格数据
    initTableData() {
      console.log(this.editRuleForm);
      urlSensitivelist({
        url: this.ruleForm.url,
        assetId: this.$route.query.id,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      }).then((res) => {
        this.totalSize = res.data ? res.count : 0;
        this.searchTable.rows = res.data;
      });
    },
    cancelWhilteById(id) {
      this.addWhiteHandler("cancelById", "", id);
    },
    handleSizeChange(e) {
      this.pageSize = e;
      this.initTableData();
    },
    handleCurrentChange(e) {
      this.currentPage = e;
      this.initTableData();
    },
  },
};
</script>

<style lang="scss" scoped>
.popover-box {
  display: inline-block;
  margin: 0 5px 5px 0;
}
</style>
